<template>
	<view class="play-box">

		<view class="play-center">
			<view class="play-header">
				<u-tabs :list="listFrom" font-size="26" :show-bar="false" active-color="#000000" bg-color="#FFFAFF" :current="current"
				 height="70" inactive-color="#999999" @change="change">
				</u-tabs>
			</view>



			<view class="play-list flex align-center flex-wrap">
				<view
					v-for="(item,index) in playList" :key="index" 
					class=" mr26 mar mb30"
					>
						<view class="w332" @click="playInfo(item)">
							<image
								:src="item.headImg"
								class="w332 h360 r20"
								mode="">
							</image>
							<view
								class="w300 mt29 mb25 f30"
								style="color: #000000;
								font-weight: 600;">
								{{item.nickName}}
							</view>
							<view class="w300 f26" style="color: #4D4D4D;">
								“{{item.memo}}”
							</view>
							<view class="mt27 flex align-center">
								<image src="../../../../static/img/price.png" class="w22 h26 mr14" mode=""></image>
								<text class="f34" style="color:#FF6000 ;">{{item.price}}星/</text>
								<text class="f20">局</text>
							</view>
						</view>
				</view>



				<!-- <u-waterfall v-model="playList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList"
							:key="index" @click="l.to('/pages/home/headInfo')"> 
							<image :src="item.headImg" class="w322 h362 r20" mode=""></image>
							<view class="demo-title w322">
								{{item.title}}
							</view>
							<view class="demo-price">
								“{{item.memo}}”
							</view>
							<view class="mt27 flex align-center mb24" >
								<image src="../../../../static/img/price.png" class="w22 h26 mr14" mode=""></image>
								<text class="f34" style="color:#FF6000 ;">{{item.price}}星/</text>
								<text class="f20">局</text>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter"
							v-for="(item, index) in rightList" :key="index"  @click="l.to('/pages/home/headInfo')">
							<image :src="item.headImg" class="w322 h362 r20" mode=""></image>
							<view class="demo-title w322">
								{{item.title}}
							</view>
							<view class="demo-price">
								“{{item.memo}}”
							</view>
							<view class="mt27 flex align-center mb24" >
								<image src="../../../../static/img/price.png" class="w22 h26 mr14" mode=""></image>
								<text class="f34" style="color:#FF6000 ;">{{item.price}}星/</text>
								<text class="f20">局</text>
							</view>

						</view>
					</template> -->
				</u-waterfall>
			</view>
		</view>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			listFrom: {
				type: Array,
				required: true,
			},
			playList: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				current: 0,
				flowList: [],
			};
		},
		onShow() {},
		onLoad(e) {
			
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			
		},
		methods: {
			change(index) {
				
				this.current = index;
				this.$emit('kindeId', this.listFrom[index].id)
			},

			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			
			playInfo(item) {
				// pages/home/headInfoDongtai
				this.l.to('/pages/home/headInfoDongtai?userId=' + item.uid + '&dynId=' + item.id)
				// this.l.to('/pages/home/headInfo?userId=' + item.uid + '&dynId=' + item.id)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.play-box {


		.play-center {

			.play-header {}

			.play-list {
				padding: 30rpx;

				.demo-warter {
					// margin-right: 30rpx;
				}
				
				.mar:nth-child(2n) {
					margin-right: 0;
				}

				.u-close {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
				}

				.demo-image {
					width: 100%;
					border-radius: 4px;
				}

				.demo-title {
					font-size: 30rpx;
					margin: 29rpx 0 25rpx;
					color: #000000;
					font-family: PingFang SC;
					font-weight: bold;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.demo-tag {
					display: flex;
					margin-top: 5px;
				}

				.demo-tag-owner {
					background-color: $u-type-error;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					font-size: 20rpx;
					line-height: 1;
				}

				.demo-tag-text {
					border: 1px solid $u-type-primary;
					color: $u-type-primary;
					margin-left: 10px;
					border-radius: 50rpx;
					line-height: 1;
					padding: 4rpx 14rpx;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					font-size: 20rpx;
				}

				.demo-price {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #4D4D4D;
					overflow: hidden;
					white-space: nowrap;
				}

				.demo-shop {
					font-size: 22rpx;
					color: $u-tips-color;
					margin-top: 5px;
				}
			}

		}
	}
</style>
